<template>
  <div>
    <el-card>
      <div slot="header" style="display: flex; align-items: center; gap: 16px;">
        <el-input
          v-model="barcode"
          ref="barcodeInput"
          placeholder="请输入商品条码或扫码"
          style="width: 250px;"
        />
        <el-button type="primary" @click="handleAdd">录入</el-button>
        <el-button type="success" @click="showCheckoutDialog" style="margin-left: auto;">结账</el-button>
      </div>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="productSerialNo" label="商品编号" />
        <el-table-column prop="barcode" label="条码" />
        <el-table-column prop="productName" label="商品名称" />
        <el-table-column prop="sellingPrice" label="原价" />
        <el-table-column prop="promotionPrice" label="活动价" />
        <el-table-column label="数量">
          <template slot-scope="scope">
            <el-button size="mini" @click="changeQuantity(scope.row, -1)" :disabled="scope.row.quantity <= 1">-</el-button>
            <span style="margin: 0 8px;">{{ scope.row.quantity }}</span>
            <el-button size="mini" @click="changeQuantity(scope.row, 1)">+</el-button>
          </template>
        </el-table-column>
        <el-table-column label="金额">
          <template slot-scope="scope">
            {{ calcAmount(scope.row) }}
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 结账弹窗 -->
    <el-dialog
      v-dialogDrag
      title="收银结账"
      :visible.sync="checkoutDialogVisible"
      width="60%"
      :close-on-click-modal="false">
      <div class="checkout-content">
        <!-- 收银信息 -->
        <div class="checkout-header">
          <div class="checkout-info">
            <span class="info-item">收银员工号：{{ cashierInfo.employeeId }}</span>
            <span class="info-item">日期：{{ cashierInfo.date }}</span>
            <span class="info-item">流水号：{{ cashierInfo.serialNumber }}</span>
          </div>
        </div>

        <!-- 商品表格 -->
        <el-table :data="checkoutItems" style="width: 100%; margin: 20px 0;">
          <el-table-column prop="productSerialNo" label="序号" width="60" />
          <el-table-column prop="productName" label="商品名称" />
          <el-table-column label="单价" width="80">
            <template slot-scope="scope">
              {{ (scope.row.promotionPrice != null ? scope.row.promotionPrice : scope.row.sellingPrice) | money }}
            </template>
          </el-table-column>
          <el-table-column prop="quantity" label="数量" width="60" />
          <el-table-column label="金额" width="80">
            <template slot-scope="scope">
              {{ (scope.row.promotionPrice != null ? scope.row.promotionPrice : scope.row.sellingPrice) * (scope.row.quantity || 1) | money }}
            </template>
          </el-table-column>
        </el-table>

        <!-- 结账信息 -->
        <div class="checkout-summary">
          <div class="summary-row">
            <span>总计：</span>
            <span class="total-amount">¥{{ totalAmount }}</span>
          </div>
          <div class="summary-row">
            <span>优惠：</span>
            <span class="discount-amount">¥{{ discountAmount }}</span>
          </div>
          <div class="summary-row">
            <span>实收：</span>
            <el-input
              v-model="receivedAmount"
              placeholder="请输入实收金额"
              style="width: 130px;"
              @input="calculateChange"
            />
          </div>
          <div class="summary-row">
            <span>找零：</span>
            <span class="change-amount">¥{{ changeAmount }}</span>
          </div>
        </div>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button @click="checkoutDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="confirmCheckout">确定收银</el-button>
      </div>
    </el-dialog>

    <!-- 票据弹窗 -->
    <el-dialog
      title="超市票据"
      :visible.sync="receiptDialogVisible"
      width="400px"
      :close-on-click-modal="false">
      <div ref="receiptContent" class="receipt-content">
        <div style="text-align:center;font-weight:bold;">超市收银票据</div>
        <div>收银员工号：{{ cashierInfo.employeeId }}</div>
        <div>日期：{{ cashierInfo.date }}</div>
        <div>流水号：{{ cashierInfo.serialNumber }}</div>
        <hr>
        <div v-for="(item, idx) in checkoutItems" :key="idx" style="font-size:13px;">
          {{ item.productName }} ×{{ item.quantity }} ×{{ (item.promotionPrice != null ? item.promotionPrice : item.sellingPrice) | money }} = {{ ((item.promotionPrice != null ? item.promotionPrice : item.sellingPrice) * (item.quantity || 1)) | money }}
        </div>
        <hr>
        <div>总计：¥{{ totalAmount }}</div>
        <div>优惠：¥{{ discountAmount }}</div>
        <div>实收：¥{{ receivedAmount }}</div>
        <div>找零：¥{{ changeAmount }}</div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="printReceipt">打印票据</el-button>
        <el-button @click="receiptDialogVisible = false">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { findAll, find, fetchCashierProductInfo } from '@/api/cashier'

export default {
  data() {
    return {
      barcode: '', // 输入框内容
      tableData: [], // 商品数据
      // 结账相关
      checkoutDialogVisible: false,
      checkoutItems: [],
      cashierInfo: {
        employeeId: '001',
        date: '',
        serialNumber: ''
      },
      receivedAmount: '',
      discountAmount: 0,
      changeAmount: 0,
      receiptDialogVisible: false // 票据弹窗状态
    }
  },
  computed: {
    totalAmount() {
      // 结账弹窗总计金额，基于checkoutItems
      return this.checkoutItems.reduce((sum, item) => {
        const price = item.promotionPrice != null ? item.promotionPrice : item.sellingPrice
        return sum + (price * (item.quantity || 1))
      }, 0).toFixed(2)
    },
    discountAmount() {
      // 优惠金额 = (原价合计 - 活动价合计)
      return this.checkoutItems.reduce((sum, item) => {
        const origin = item.sellingPrice * (item.quantity || 1)
        const promo = (item.promotionPrice != null ? item.promotionPrice : item.sellingPrice) * (item.quantity || 1)
        return sum + (origin - promo)
      }, 0).toFixed(2)
    }
  },
  filters: {
    money(val) {
      return '¥' + (parseFloat(val) || 0).toFixed(2)
    }
  },
  created() {
    console.log('created钩子执行了')
    // this.loadAll() // 注释掉自动加载,让页面初始为空
    this.initCashierInfo()
  },
  methods: {
    initCashierInfo() {
      // 初始化收银信息
      const now = new Date()
      this.cashierInfo.date = now.toLocaleDateString()
      this.cashierInfo.serialNumber = 'SN' + Date.now()
    },
    async loadAll() {
      try {
        const res = await findAll()
        console.log('接口findAll返回：', res)
        this.tableData = Array.isArray(res) ? res : (res.data || [])
        console.log('赋值后tableData：', this.tableData)
      } catch (e) {
        console.error('findAll异常', e)
        this.$message.error('加载全部商品失败')
      }
    },
    async handleSearch() {
      if (!this.barcode) {
        // 当输入框为空时，显示全部数据
        this.loadAll()
        return
      }
      try {
        const res = await fetchCashierProductInfo(this.barcode)
        this.tableData = res.data ? [res.data] : []
        if (!res.data) {
          this.$message.info('未查询到相关商品')
        }
      } catch (e) {
        this.$message.error('查询失败，请重试')
      }
    },
    // 新增录入逻辑
    async handleAdd() {
      if (!this.barcode) {
        this.$message.warning('请输入商品条码')
        return
      }
      try {
        const res = await fetchCashierProductInfo(this.barcode)
        if (!res.data) {
          this.$message.info('未查询到相关商品')
          return
        }
        // 判断是否已存在
        const idx = this.tableData.findIndex(item => item.productSerialNo === res.data.productSerialNo)
        if (idx !== -1) {
          this.tableData[idx].quantity += 1
        } else {
          this.tableData.push({ ...res.data, quantity: 1 })
        }
        this.barcode = ''
        this.$nextTick(() => {
          this.$refs.barcodeInput && this.$refs.barcodeInput.focus && this.$refs.barcodeInput.focus()
        })
      } catch (e) {
        this.$message.error('录入失败，请重试')
      }
    },
    changeQuantity(row, delta) {
      row.quantity += delta
      if (row.quantity < 1) row.quantity = 1
    },
    calcAmount(row) {
      const price = row.promotionPrice != null ? row.promotionPrice : row.sellingPrice
      return (price * row.quantity).toFixed(2)
    },
    showCheckoutDialog() {
      // 显示结账弹窗，带入商品明细
      this.checkoutItems = this.tableData.map(item => ({ ...item }))
      this.receivedAmount = ''
      this.changeAmount = 0
      // 重新生成流水号和日期
      const now = new Date()
      this.cashierInfo.date = now.toLocaleDateString()
      this.cashierInfo.serialNumber = 'SN' + Date.now()
      this.checkoutDialogVisible = true
    },
    calculateChange() {
      // 计算找零
      const received = parseFloat(this.receivedAmount) || 0
      const total = parseFloat(this.totalAmount) || 0
      this.changeAmount = (received - total).toFixed(2)
    },
    confirmCheckout() {
      if (!this.receivedAmount || parseFloat(this.receivedAmount) < parseFloat(this.totalAmount)) {
        this.$message.warning('实收金额不能小于总计金额')
        return
      }
      // 这里可以调用结账接口
      this.$message.success('收银成功！')
      this.checkoutDialogVisible = false
      // 弹出票据视图
      this.receiptDialogVisible = true
      // 不再清空表格数据
    },
    printReceipt() {
      const printContent = this.$refs.receiptContent
      const newWin = window.open('', '', 'width=400,height=600')
      newWin.document.write('<html><head><title>打印票据</title></head><body>')
      newWin.document.write(printContent.innerHTML)
      newWin.document.write('</body></html>')
      newWin.document.close()
      newWin.focus()
      newWin.print()
      newWin.close()
    }
  }
}
</script>

<style scoped>
.checkout-content {
  padding: 20px;
}

.checkout-header {
  margin-bottom: 20px;
}

.checkout-info {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #666;
}

.info-item {
  margin-right: 20px;
}

.checkout-summary {
  margin-top: 20px;
  border-top: 1px solid #eee;
  padding-top: 20px;
}

.summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.total-amount {
  font-size: 18px;
  font-weight: bold;
  color: #e6a23c;
}

.discount-amount {
  color: #67c23a;
}

.change-amount {
  font-size: 16px;
  font-weight: bold;
  color: #409eff;
}

.dialog-footer {
  text-align: right;
}

.receipt-content {
  font-size: 14px;
  line-height: 1.7;
  padding: 28px 12px;
  border: 1.5px solid #dcdfe6;
  border-radius: 8px;
  background: #fafbfc;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  margin: 10px auto;
  max-width: 220px;
  min-width: 120px;
}
</style>
